<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五子棋游戏</title>
  <style>
    /* 棋盘样式 */
    #chessboard {
      width: 450px;
      height: 450px;
      margin: 50px auto;
      border: 2px solid #000;
      display: flex;
      flex-wrap: wrap;
    }

    /* 棋子格子样式 */
    .chess-cell {
      width: 30px;
      height: 30px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    /* 棋子样式 */
    .chess-piece {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .black {
      background-color: #000;
    }

    .white {
      background-color: #fff;
    }
  </style>
</head>

<!-- 第一次修改提交 -->
<body>
  <div id="chessboard"></div>
  <script>
    // 棋盘大小（15*15）
    const BOARD_SIZE = 15;
    // 棋盘元素
    const chessboard = document.getElementById('chessboard');
    // 棋盘数据，记录每个位置的棋子（0：空，1：黑棋，2：白棋）
    const board = new Array(BOARD_SIZE).fill(0).map(() => new Array(BOARD_SIZE).fill(0));
    // 当前下棋方，1：黑棋先下
    let currentPlayer = 1;

    // 初始化棋盘
    function initChessboard() {
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          const cell = document.createElement('div');
          cell.className = 'chess-cell';
          cell.dataset.row = i;
          cell.dataset.col = j;
          cell.addEventListener('click', handleCellClick);
          chessboard.appendChild(cell);
        }
      }
    }

    // 处理点击棋子格子事件
    function handleCellClick(event) {
      const cell = event.target;
      const row = parseInt(cell.dataset.row);
      const col = parseInt(cell.dataset.col);
      if (board[row][col] !== 0) {
        // 该位置已有棋子，不能下棋
        return;
      }
      // 在棋盘数据中记录棋子
      board[row][col] = currentPlayer;
      // 绘制棋子
      const piece = document.createElement('div');
      piece.className = `chess-piece ${currentPlayer === 1 ? 'black' : 'white'}`;
      cell.appendChild(piece);
      // 判断是否获胜
      if (checkWin(row, col)) {
        alert(`${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`);
        // 重置游戏
        resetGame();
        return;
      }
      // 切换下棋方
      currentPlayer = currentPlayer === 1 ? 2 : 1;
    }

    // 检查是否获胜
    function checkWin(row, col) {
      const player = board[row][col];
      // 检查横向
      let count = 0;
      for (let j = 0; j < BOARD_SIZE; j++) {
        if (board[row][j] === player) {
          count++;
          if (count === 5) {
            return true;
          }
        } else {
          count = 0;
        }
      }
      // 检查纵向
      count = 0;
      for (let i = 0; i < BOARD_SIZE; i++) {
        if (board[i][col] === player) {
          count++;
          if (count === 5) {
            return true;
          }
        } else {
          count = 0;
        }
      }
      // 检查正斜线（从左上到右下）
      count = 0;
      let startRow = row - Math.min(row, col);
      let startCol = col - Math.min(row, col);
      while (startRow < BOARD_SIZE && startCol < BOARD_SIZE) {
        if (board[startRow][startCol] === player) {
          count++;
          if (count === 5) {
            return true;
          }
        } else {
          count = 0;
        }
        startRow++;
        startCol++;
      }
      // 检查反斜线（从右上到左下）
      count = 0;
      startRow = row + Math.min(BOARD_SIZE - 1 - row, col);
      startCol = col - Math.min(BOARD_SIZE - 1 - row, col);
      while (startRow >= 0 && startCol < BOARD_SIZE) {
        if (board[startRow][startCol] === player) {
          count++;
          if (count === 5) {
            return true;
          }
        } else {
          count = 0;
        }
        startRow--;
        startCol++;
      }
      return false;
    }

    // 重置游戏
    function resetGame() {
      // 清空棋盘数据
      for (let i = 0; i < BOARD_SIZE; i++) {
        for (let j = 0; j < BOARD_SIZE; j++) {
          board[i][j] = 0;
        }
      }
      // 清空棋盘 DOM 元素
      chessboard.innerHTML = '';
      // 重新初始化棋盘
      initChessboard();
      // 重置当前下棋方
      currentPlayer = 1;
    }

    // 初始化棋盘
    initChessboard();
  </script>
</body>

</html>